<template>
    <div class="subpage bill-month-container">
        <div class="bill-month-top">
            <div class="bill-month-top-left" @click="showPopup">
                <span>{{year}}年{{month}}月</span>
                <van-icon name="arrow-down" class="arrow-down" />
            </div>
            <ul class="bill-month-top-right">
                <li :class="actCategory == 1 ? 'active' : ''" @click="changeType(1)">支出</li>
                <li :class="actCategory == 2 ? 'active' : ''" @click="changeType(2)">收入</li>
            </ul>
        </div>
        <div class="bill-month-bottom">
            <p>共{{actCategory == 1 ? '支出' : '收入'}}{{totalNum}}笔，合计</p>
            <p class="color-primary" v-if="actCategory == 1">{{expendMoney || '0.00'}}元</p>
            <p class="color-primary" v-else>{{incomeMoney || '0.00'}}元</p>
        </div>
        <div class="bill-list-box">
            <van-list
                v-model="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text="已加载全部了哦～"
                @load="onLoadMore"
            >
                <billListBase :listData="listData" v-if="listData.length > 0"></billListBase>
            </van-list>
        </div>

        <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '45%' }"
        >
            <van-datetime-picker
                v-model="currentDate"
                type="year-month"
                :min-date="minDate"
                @confirm="onConfirm"
                @cancel="onCancel"
            />
        </van-popup>
    </div>
</template>

<script>
import { DatetimePicker, Popup, List } from 'vant';
import billListBase from './BillComponent';

const YearMonth = {
    '2018': ['1', '2', '3', '4', '5'],
    '2019': ['1', '2', '3', '4', '5']
};

export default {
    components: {
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [List.name]:List,
        billListBase
    },
    data() {
        return {
            show: false,
            columns: [
                {
                    values: Object.keys(YearMonth),
                    className: 'column1'
                },
                {
                    values: YearMonth['2018'],
                    className: 'column2',
                    defaultIndex: 2
                }
            ],
            minDate: new Date(2019, 8, 1),
            currentDate: new Date(),
            year: '',
            month: '',
            listData: [],
            pageIndex: 1,
            pageSize: 10,
            actCategory: 1,
            totalNum: 0,
            loading: false,
            finished: false,
            expendMoney: 0,
            incomeMoney: 0,
        }
    },
    created() {
        this.year = new Date().getFullYear();
        this.month = new Date().getMonth() + 1;
        this.month = this.month < 10 ? '0' + this.month : this.month;
        this.getListData()
    },
    methods: {
        showPopup() { //显示日期选择
            this.show = true;
        },
        onConfirm(value) { //选择日期
            let timestamp = new Date(value).getTime();
            let chooseDate = (new Date(timestamp + 8 * 3600 * 1000)).toJSON().replace("T", " ").substr(0, 10);
            let chooseYear = chooseDate.split('-')[0];
            let chooseMonth = chooseDate.split('-')[1];
            this.year = chooseYear;
            this.month = chooseMonth;
            this.show = false;

            this.listData = [];
            this.pageIndex = 1;
            this.loading = false;
            this.finished = false;
            this.getListData()
        },
        onCancel() { //取消日期选择
            this.show = false;
        },
        changeType(type) { //支出/收入
            this.actCategory = type;
            this.listData = [];
            this.pageIndex = 1;
            this.loading = false;
            this.finished = false;
            this.getListData()
        },
        getListData() { //获取信息
            let getData = {};
            if(this.$route.params.actCode != 'null'){
                getData = {
                    pgCt: this.pageIndex,
                    pgSz: this.pageSize,
                    actCode: this.$route.params.actCode,
                    month: `${this.year}${this.month}`,
                    actCategory: this.actCategory
                }
            }else{
                getData = {
                    pgCt: this.pageIndex,
                    pgSz: this.pageSize,
                    month: `${this.year}${this.month}`,
                    actCategory: this.actCategory
                }
            }
            let url = this.pageIndex > 1 ? '/api/trading/list?noLoading' : '/api/trading/list'
            this.$api.get(url, getData)
                .then((res) => {
                    if(res.data.ipage.total > 0){
                        this.showNoInfo = false;
                    }else{
                        this.showNoInfo = true;
                    }
                    this.totalNum = res.data.ipage.total;
                    this.expendMoney = res.data.expendMoney;
                    this.incomeMoney = res.data.incomeMoney;
                    if(res.data.ipage.records.length > 0){
                        res.data.ipage.records.forEach((item) => {
                            item.actTime = this.$tool.dateFormat(item.actTime, 3)
                        })
                    }
                    this.listData = this.listData.concat(res.data.ipage.records)
                    if(this.pageIndex > 1 && res.data.ipage.records.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getListData()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
    }
}
</script>

<style lang="scss" scoped>
    .bill-month-container {
        background-color: #fff;
        .bill-month-top {
            width: 100%;
            height: 64px;
            padding: 20px 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f8f8;
            .bill-month-top-left {
                display: flex;
                align-items: center;
                span {
                    margin-right: 6px;
                }
            }
            .bill-month-top-right {
                display: flex;
                li {
                    margin-left: 16px;
                    color: #969C9E;
                    &.active {
                        position: relative;
                        color: #31BC8D;
                        &::after {
                            content: "";
                            position: absolute;
                            bottom: -8px;
                            left: 0;
                            width: 100%;
                            height: 2px;
                            background-color: #31BC8D;
                        }
                    }
                }
            }
        }
        .bill-month-bottom {
            width: 100%;
            height: 85px;
            padding: 26px 16px 4px;
            box-sizing: border-box;
            p {
                &:first-child {
                    margin-bottom: 10px;
                    font-size: 12px;
                    color: #969C9E;
                }
                &:last-child {
                    font-size: 22px;
                }
            }
        }
        .bill-list-box {
            width: 100%;
            height: calc(100vh - 150px);
            overflow-y: scroll;
        }
    }
</style>

<style lang="scss">
    .bill-month-container {
        .van-picker__cancel {
            color: #969C9E!important;
        }
    }
</style>